<template>
  <span :style="styles" class="points-loading">{{ points.join('') }}</span>
</template>

<script setup>
import { defineProps, onMounted, onBeforeUnmount, ref } from 'vue'
defineProps({
  styles: {
    type: [String, Object],
    default: ''
  }
})
const points = ref(['.'])
let timer

onMounted(() => {
  timer = setInterval(() => {
    if (points.value.length < 6) {
      points.value.push('.')
    } else {
      points.value = ['.']
    }
  }, 250)
})
onBeforeUnmount(() => {
  window.clearInterval(timer)
})
</script>

<style lang="less" scoped>
.points-loading {
  display: inline-block;
  width: 30px;
  text-align: left;
}
</style>
